<template>
  <div class="container_detail word-edit">
    <div class="header">
      <p>商品管理>{{returnName(user.type)}}</p>
      <el-button class="link" type="primary">
        <router-link :to="{path:'goodList',query: { pageIndex: currentPage }}" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <el-form :model="user"  ref="user" label-width="120px" class="">
        <div class="list">
          <div class="title">查看{{returnName(user.type)}}</div>
          <el-form-item prop="goodsName">
            <div class="item">
              <div class="item-key">商品名称:</div>
              <div class="item-value">
                {{user.goodsName}}
              </div>
            </div>
          </el-form-item>
          <el-form-item  v-if="user.type != 'real'" prop="price">
            <div class="item">
              <div class="item-key">价格:</div>
              <div class="item-value">
                {{user.price}}
              </div>
            </div>
          </el-form-item>
          <el-form-item  v-if="user.type == 'real'" prop="price">
            <div class="item">
              <div class="item-key">规格及价格:</div>
              <div class="item-value">
                <div v-for="(item,index) in modeArr" :key="index">
                  <span>{{item.name}}</span>
                  <span>{{item.price}}</span>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="user.type == 'virtual'" prop="price">
            <div class="item">
              <div class="item-key">有效期:</div>
              <div class="item-value">
                {{user.validTime}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="stockNum">
            <div class="item">
              <div class="item-key">库存数量:</div>
              <div class="item-value">
               {{user.restNum}}  已售出{{user.saleNum}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">商品类别:</div>
              <div class="item-value">
               {{returnName(user.type)}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">商品分类:</div>
              <div class="item-value">
               {{user.categoryDTO?user.categoryDTO.categoryName:'--'}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">所属品牌:</div>
              <div class="item-value">
               {{user.brandDTO?user.brandDTO.brandName:''}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="city">
            <div class="item">
              <div class="item-key">所属城市:</div>
              <div class="item-value">
                
               {{user.provinceName||'全国'}} {{user.city}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="notice">
            <div class="item">
              <div class="item-key">购买须知:</div>
              <div class="item-value">
               {{user.notice}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">封面轮播图片:</div>
              <div class="item-value">
               <!-- {{user.photo}} -->
                <div class="value-imgs">
                    <img style="width:120px;" v-for="(item,index) in user.photos" :key="index" :src="item.fileUrl" alt="">
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">商品详情:</div>
              <div class="item-value">
               <div class="value-html" v-html="user.details"></div>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">是否上架:</div>
              <div class="item-value">
               {{user.isOn == 'y'?'是':'否'}}
              </div>
            </div>
          </el-form-item>
          <el-form-item  v-if="user.type == 'real'" prop="userName">
            <div class="item">
              <div class="item-key">运费:</div>
              <div class="item-value">
               ¥{{user.freight }}
              </div>
            </div>
          </el-form-item>
          <el-form-item  v-if="user.type == 'real'" prop="userName">
            <div class="item">
              <div class="item-key">包邮条件:</div>
              <div class="item-value">
               买满{{user.pinkageTerm}}件
              </div>
            </div>
          </el-form-item>
          <el-form-item  v-if="user.type == 'real'" prop="userName">
            <div class="item">
              <div class="item-key">不可配送区/县:</div>
              <div class="item-value">
               <!-- this.areaArr -->
               <div v-if="user.isDistributionArea == 'n'">无</div>
               <div v-else>
                 {{this.areaArr}}
               </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item  v-if="user.type == 'real'" prop="userName">
            <div class="item">
              <div class="item-key">配送时间选择方式:</div>
              <div class="item-value">
               选择{{user.deliveryTime}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">是否公开 :</div>
              <div class="item-value">
               {{user.isOpen == 'y'?'是':'否'}}
              </div>
            </div>
          </el-form-item>
          <el-form-item  v-if="user.type != 'real'" prop="price">
            <div class="item">
              <div class="item-key">适用门店信息:</div>
              <div class="item-value">
               <div class="value-html" v-html="user.applyShopMsg"></div>
              </div>
            </div>
          </el-form-item>
        </div>
      </el-form>
       <el-button @click="linkTo" style="margin:20px 0 0 40%" v-if="user.type == 'third'" type="primary" size="mini">查看优惠券列表</el-button>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
let countryArr = require("../../../static/city.json");
export default {
  data() {
    return {
      id: "",
      info: "",
      // 返回 导航页码
      currentPage: 1,
      user: {},
     typeArr:[
        {
            name:'实体商品',
            value:'real'
        },
         {
            name:'自营电子券',
            value:'virtual'
        },
        {
            name:'第三方电子券',
            value:'third'
        }
      ],
      brandArr:[],
      sortArr:[],
      provinceArr :[],
      cityArr:[],
      modeArr:[],
      areaArr:[]
    };
  },
  mounted() {
    this.provinceArr = countryArr.provinces.province,
    this.id = this.$router.currentRoute.query.id;
    this.currentPage = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getDetail();
  },
  methods: {
    linkTo(){
       this.$router.push({
         path:'goodCouponDetail',
         query:{
           id:this.id,
           pageIndex:this.currentPage
         }
       })
    },
    returnName(val){
        let str;
        this.typeArr.map(item=>{
            if(item.value == val){
                str = item.name
            }
        })
        return str
    },
    getDetail() {
      let url = CONSTANT.URL.LIST.findEsGoodsById;
      let data = { id: this.id }
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.user = res.data.bussData;
        let data = res.data.bussData;
        if(data.type == 'real'&&data.modelPrice){
          let arr = data.modelPrice ?data.modelPrice.split('::'):[]
          this.modeArr = []
          arr.map(item=>{
            let arr1 = item.split('&&')
            this.modeArr.push({
              name:arr1[0],
              price:arr1[1]
            })
          })
        }
        let cityArr = []
        
        this.provinceArr.map(item=>{
              if(this.user.province == item.ssqid){
                this.user.provinceName = item.ssqname
                  cityArr = item.cities.city
                  item.cities.city.map(list=>{
                      if(list.ssqid == this.user.city){
                          this.user.city = list.ssqname
                      }
                  })
              }
          })
         let areaArr =[]
          cityArr.map(item=>{
            if(data.city == item.ssqname){
               areaArr = item.areas.area
            }
          })
          let area = data.nonDistributionArea?data.nonDistributionArea.split(','):[]
          area.map(item=>{
            areaArr.map(list=>{
              if(item == list.ssqid){
                this.areaArr.push(list.ssqname)
              }
            })
          })
          this.areaArr = this.areaArr.length?this.areaArr.join(','):''
          console.log(this.areaArr,'this.areaArr')
      });
    }
  }
};
</script>
<style lang="scss">
.word-edit {
  .el-form-item {
    margin: 0px;
    
  }

  .item-value {
    .el-input {
      width: 50%;
    }
    .el-select {
      width: 50%;
      .el-input {
        width: 100%;
      }
    }
  }
  .el-form-item__content {
    margin: 0px !important;
  }
}
</style>

